<template>
  <div class="content">
    <div class="cloud-header">
      <h2>用户管理</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <div class="cloud-subset-action" v-if="role === 'admin'">
          <DropdownCustom class-name="h-text-dropdown" offset='-80, 10' :toggleIcon="false">
            <Button color="green">+新建分组</Button>
            <div slot="content" v-width="260">
              <Form :label-width="50">
                <div style="padding: 20px 20px 0 20px;">
                  <FormItem label="名称" prop="name">
                    <input type="text" v-model="group.name">
                  </FormItem>
                  <FormItem label="标题" prop="title">
                    <input type="text" v-model="group.title">
                  </FormItem>
                  <FormItem label="说明" prop="description">
                    <input type="text" v-model="group.description">
                  </FormItem>
                </div>
                <Row style="line-height:40px;border-top:1px solid #EEE;">
                  <Cell width=24 class="text-center" style="border-right:1px solid #EEE;"><a @click="handleAddGroup">保存分组</a></Cell>
                </Row>
              </Form>
            </div>
          </DropdownCustom>
        </div>
        <p class="cloud-subset-tips">在开发的场景同，通常一个项目管理多个应用，如微信公众号，微信小程序，数据后台等等公用的一个数据库，此处用于区分不同应用场景<br></p>
      </div>
      <Row class="cloud-users-manage">
        <Cell width="16" class="cloud-users-left">
          <div class="cloud-users-group">
            <span class="cloud-users-group-name">全部用户 <Button color="green" v-popup.newUser>+添加用户</Button></span>
          </div>
          <table class="table">
            <thead class="thead">
              <tr>
                <th class="table_cell user no_extra" colspan="2">
                  <div class="group_select">
                    <Checkbox>全选</Checkbox>
                    <div class="group_tools">
                      <Button transparent text-color="gray">批量分组</Button>
                      <Button transparent text-color="gray">加入黑名单</Button>
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item, index) in users" :key="index">
                <td class="table_cell user">
                  <div class="user_info">
                    <!--个人信息区-->
                    <a target="_blank" class="remark_name" data-fakeid="o-d4IwxvgqEIpiH7n3pFTBjoLQQ0">{{item.nickname || item.username || item.mobile }}</a>
                    <a target="_blank" class="avatar">
                      <img :src="item.avatar" class="js_msgSenderAvatar">
                    </a>
                    <Checkbox class="frm_checkbox_label"></Checkbox>
                    <div class="js_tags user_tag_area">
                      <DropdownCustom class-name="h-text-dropdown" offset='-200%, 10'>
                        <span>默认分组</span>
                        <div slot="content" v-width="470">
                          <div v-padding="20">
                            <Radio :datas="menus" keyName="name" titleName="title" v-model="item.role"></Radio>
                          </div>
                          <div style="width: 100%; text-align: center; padding: 10px 0; border-top:1px solid #e7e7eb; ">
                            <button class="h-btn">确认</button>
                            <button class="h-btn h-btn-primary">取消</button>
                          </div>
                        </div>
                      </DropdownCustom>
                    </div>
                  </div>
                </td>
                <td class="table_cell user_opr tr">
                  <Button>修改备注</Button>
                </td>
              </tr>
            </tbody>
          </table>
          <Pagination style="margin-top: 20px;" v-model="pagination" align="center" @change="currentChange" small></Pagination>
        </Cell>
        <Cell width="8">
          <div class="role-container">
            <div v-for="(r, index) of menus" :key="index" class="role-item" :class="{selected: menu == r.name}" @click="changeRole(r.name,index)">
              <p class="title">{{r.title}}</p>
            </div>
          </div>
        </Cell>
      </Row>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      role:'',
      group: {
        name: '',
        title: '',
        description: ''
      },
      users: [],
      param2: { 1: '选择1', 2: '选择2', 3: '选择3' },
      index: 0,
      menu: '',
      menus: [],
      where:{},
      pagination: {
        page: 1,
        size: 10,
        total: 10
      }
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.role = this.$cloud.userInfo().role
    this.handleGetGroup();
    this.handleUsersCount();
    this.handleGetUsers();
  },
  methods: {
    /**
     * 分页触发
     * @param  {[type]} value [description]
     * @return {[type]}       [description]
     */
    currentChange(value) {
      this.pagination = value
      this.handleUsersCount();
      this.handleGetUsers();
    },
    /**
     * 角色改变
     * @param  {[type]} r     [description]
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    changeRole(r, index) {
      this.menu = r;
      this.index = index;
      this.where.role = r
      this.pagination.page = 1;
      this.handleUsersCount();
      this.handleGetUsers();
    },
    /**
     * 获取权限组
     * @return {[type]} [description]
     */
    handleGetGroup() {
      this.$cloud.roles().all().then(data => {
        this.menus = data;
      }).catch(error => {
        log(error);
      });
    },
    /**
     * 获取用户
     * @return {[type]} [description]
     */
    handleGetUsers() {
      let where = this.where.role?this.where:{}
      this.$cloud.users().all(where,this.pagination.page,this.pagination.size).then(data => {
        console.log('用户信息', data);
        this.users = data;
      }).catch(error => {
        log(error);
      });
    },
    /**
     * 用户数量统计
     * @return {[type]} [description]
     */
    handleUsersCount() {
      let where = this.where.role?this.where:{}
      this.$cloud.users().total(where).then(data => {
        this.pagination.total = data;
      }).catch(error => {
        log(error);
      });
    },
    /**
     * 添加权限组
     * @return {[type]} [description]
     */
    handleAddGroup() {
      this.$cloud.roles().check(this.group.name).then(data => {
        // 判断是否存在
        if (data) {
          this.$Message.info('分组名称已经存在');
        } else {
          this.$cloud.roles().add(this.group).then(data => {
            console.log('data2', data);
            this.group = {
              name: '',
              title: '',
              description: ''
            };
          }).catch(error => {
            log(error);
            this.$Message.info('添加分组失败');
          });
        }
      });
    }
  }
};

</script>
<style lang="less" scoped="true">
.cloud-subset-title {
  padding-left: 0;
}

.role-container {
  padding: 0;

  .role-item {
    height: 44px;
    line-height: 44px;
    border-bottom: @border;

    p {
      padding-left: 20px;
      margin: 0;
    }

    &.selected,
    &:hover {
      background: @gray4-color;
      cursor: pointer;
    }

    .title {
      font-size: 14px;
      color: @dark-color;
    }
  }
}

.h-dropdowncustom-group:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -5px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fdfdfd;
  background-color: #fff;
  margin-left: -8px;
  z-index: -1;

}

.cloud-users-manage {
  padding-top: 0;
  clear: both;
  *zoom: 1;
  *overflow: hidden;
  background-color: #fff;
  border: 1px solid #e7e7eb;

  .cloud-users-group {
    padding: 11px 20px;
    border-bottom: 1px solid #e7e7eb;
  }

  .table {
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    text-align: center;
    // border-top: 1px solid #e7e7eb;
    // border-bottom: 1px solid #e7e7eb;
    border-spacing: 0;

    tr {
      display: table-row;
      vertical-align: inherit;
      border-color: inherit;
    }

  }

  .cloud-users-left {
    border-right: 1px solid #e7e7eb;
  }

  .group_select {
    line-height: 44px;
  }

  .group_tools {
    display: inline-block;
    padding-left: 20px;
  }

  .table_cell.user {
    text-align: left;
    width: 495px;
    border-left-width: 0;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 400;
    font-style: normal;
  }

  .thead {
    background-color: #f4f5f9;

  }

  .tbody tr:first-child .table_cell {
    border-top-width: 0;
    width: 60px;
  }

  .user_list .table_cell.user {
    text-align: left;
    width: 495px;
  }

  .tbody tr:first-child .table_cell {
    border-top-width: 0;
  }

  .user_list .table_cell.user {
    text-align: left;
    width: 495px;
  }

  .table_cell:first-child {
    text-align: left;
  }

  .cloud-users-manage .tbody tr:first-child .table_cell {
    border-top-width: 0;
  }

  .cloud-users-manage .tbody tr:first-child .table_cell {
    border-top-width: 0;
  }

  .cloud-users-manage .tbody .table_cell {
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 1px solid #e7e7eb;
  }

  .cloud-users-manage .table_cell:first-child {
    text-align: left;
  }

  .cloud-users-manage .table_cell.user {
    text-align: left;
    width: 495px;
    line-height: 44px;
    border-left-width: 0;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 400;
    font-style: normal;
  }

  .tbody .table_cell {
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 1px solid #e7e7eb;
  }

  .table_cell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .table_cell {
    padding: 0;
    font-weight: 400;
    font-style: normal;
  }

  .user_info {
    position: relative;
    margin-left: 90px;
    min-height: 48px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .user_info .remark_name,
  .user_info .nick_name {
    color: #353535;
  }

  .user_info .frm_checkbox_label {
    position: absolute;
    top: 0;
    left: -90px;
  }

  .frm_radio_label,
  .frm_checkbox_label {
    display: inline-block;
    text-align: left;
    cursor: pointer;
    margin-right: 1em;
  }

  .user_tag_area {
    color: #9a9a9a;
    white-space: nowrap;
  }

  .user_tag_area {
    padding-top: 3px;
  }

  .user_info .avatar {
    position: absolute;
    top: 0;
    left: -65px;
  }

  a {
    text-decoration: none;
    color: #576b95;
  }

  .user_info .avatar img {
    width: 48px;
    height: 48px;
  }

  .cloud-users-manage .user_tag_area {
    padding-top: 3px;
  }

  .cloud-users-manage .user_tag_area {
    color: #9a9a9a;
    white-space: nowrap;
  }
}

@menu-prefix: ~"@{prefix}menu";

.menu-custom {
  background: @white-color;

  .@{menu-prefix} {
    &-show {
      translate: font-size, color .3s;

      &:hover {
        // background: @yellow-color;
        color: #353535;
      }
    }

    &-li {
      &-selected {
        background-color: #f4f5f9;
        font-weight: bold;
        // background: @yellow-color;
        color: #353535;
      }
    }
  }
}

</style>
